<!doctype html>
<html>
<head>
	<title>Export to PNG</title>
    <link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
    <script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="../common/samples.css">
    <style type="text/css">
	    html,body{ height:100%; margin:0}
	    .webix_view.toolbar{
		    background: #fafafa;
	    }
    </style>
</head>
<body>


    <div id="chartDiv" style="width:600px;height:270px;margin:20px"></div>

	<script>

        webix.ui({
	        container:"chartDiv",

	        rows: [
		        {
			        view: "form",
			        css: "toolbar",
			        paddingY: 5,
			        paddingX: 10,
			        cols:[
				        {
					        view: "label", label: "Sales per Year"
				        },

				        {
					        view: "button", type: "iconButton", label: "Export to PNG", icon: "image", width: 140,
					        click:function(){
					            webix.toPNG($$("myChart"));
				            }
				        }
			        ]

		        },
		        {
			        view:"chart",
					id: "myChart",

			        type:"line",
			        value:"#sales#",
			        onContext:{},
			        item:{
				        borderColor: "#1293f8",
				        color: "#ffffff"
			        },
			        line:{
				        color:"#1293f8",
				        width:3
			        },
			        xAxis:{
				        template:"'#year#"
			        },
			        offset:0,
			        yAxis:{
				        start:0,
				        end:100,
				        step:10,
				        template:function(obj){
					        return (obj%20?"":obj)
				        }
			        },
			        data: [
				        { id:1, sales:20, year:"06"},
				        { id:2, sales:55, year:"07"},
				        { id:3, sales:40, year:"08"},
				        { id:4, sales:78, year:"09"},
				        { id:5, sales:61, year:"10"},
				        { id:6, sales:35, year:"11"},
				        { id:7, sales:80, year:"12"},
				        { id:8, sales:50, year:"13"},
				        { id:9, sales:65, year:"14"},
				        { id:10, sales:59, year:"15"}
			        ]
		        }

            ]

        });




	</script>
</body>
</html>
